<template>
  <div class="contain">
    <div class="model">
      <span>您的位置：</span>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="el_breadcrumb"
      >
        <el-breadcrumb-item
          :to="{ path: item.path }"
          v-for="(item, index) in list"
          :key="index"
          class="el_breadcrumb_item"
          >{{ item.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style lang="scss" scoped>
.contain {
  .model {
    width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 64px;
    font-size: 14px;
    color: #666666;
    .el_breadcrumb {
      .el_breadcrumb_item {
        /deep/ .el-breadcrumb__inner.is-link {
          color: #999999;
        }
        &:last-child {
          /deep/ .el-breadcrumb__inner.is-link {
            color: $font-color;
          }
        }
      }
    }
  }
}
</style>
